<template>
<div style="z-index:5;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white">
    <div class="zhezhao"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goper">
    <div class="div1">
        <span>身份验证</span>
    </div>
    <div class="div2">
        <div class="div3"><span>为保护账号安全，请先进行身份验证：</span></div>
        <div class="div4" @click="goSendSMS">
            <img src="../../../../assets/changepsw/phone.png" class="img_phone">
            <div style="margin-left:70px;font-size:18px;color:black;padding-top:20px">手机号码验证</div>
            <div v-if="phone" style="margin-left:70px;margin-top:5px;padding-bottom:20px">通过 
                <span>{{phone.slice(0,3)}}******{{phone.slice(9,11)}}</span> 接收短信验证码</div>
            <div v-if="!phone" style="margin-left:70px;margin-top:5px;padding-bottom:20px">检测到您未绑定手机号</div>
            <img src="../../../../assets/changepsw/forward.png" class="img_forward">
        </div>
        <div class="div4" style="margin-top:10px" @click="goSendEmail">
            <img src="../../../../assets/changepsw/email.png" class="img_phone">
            <div style="margin-left:70px;font-size:18px;color:black;padding-top:20px">邮箱验证</div>
            <div v-if="email" style="margin-left:70px;margin-top:5px;padding-bottom:20px">向 
                <span>{{email.slice(0,2)}}******{{email.slice(email.length-8)}}</span> 发送验证码</div>
            <div v-if="!email" style="margin-left:70px;margin-top:5px;padding-bottom:20px">检测到您未绑定邮箱</div>
            <img src="../../../../assets/changepsw/forward.png" class="img_forward">
        </div>
        <div class="div4" style="margin-top:10px" @click="goPerData">
            <img src="../../../../assets/changepsw/per_data.png" class="img_phone">
            <div style="margin-left:70px;font-size:18px;color:black;padding-top:20px">资料辅助验证</div>
            <div style="margin-left:70px;margin-top:5px;padding-bottom:20px">填写账号信息与个人资料进行验证</div>
            <img src="../../../../assets/changepsw/forward.png" class="img_forward">
        </div>
    </div>
    <div class="div33" v-show="ErrorMessage" :style="ErrorPosition+ErrorPosition2">
        <img src="../../../../assets/changepsw/error.png" class="img_error">
        <span style="margin-left:15px">功能尚未开发</span>
    </div>
    <ImgSafty class="img_safty"></ImgSafty>
</div>
</template>

<script>
import ImgSafty from './img/img_safty.vue'
export default {
    name:'forgetpsw',
    components:{ImgSafty},
    data(){
        return{
            ErrorMessage:0,
            ErrorPosition:'',
            ErrorPosition2:'',
            username:'',
            phone:'',
            email:'',
        }
    },
    methods:{
        goper(){this.$router.replace({name:'intercept_backspace'})},
        goPerData(){
            this.ErrorMessage=1
            console.log('功能尚未开发')
            },
        goSendSMS(){
            if(this.phone == '' || this.phone == null){
                //这里的phone先定义了是''，虽然请求得到的数据是null
                this.$router.push({name:'infoshow'})
            }else{
                this.$addr.get(`sms/${this.username}/${this.phone}/1332081/send`).then(
                    response=>{
                        console.log('发送验证码请求成功',response.data);
                        if(response.data.state == 4001){
                            this.$router.replace({name:'login',params:{'username':this.username}})
                        }else{
                            this.$router.push({name:'sendCode',params:{'username':this.username,'phone':this.phone}})
                        }
                    },error=>{
                        this.$router.replace({name:'login'})
                        this.$message({
                            message:'发送验证码请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("发送验证码请求失败",error.message);
                    }
                )
            }
        },
        goSendEmail(){
            if(this.email == '' || this.email == null){
                this.$router.push({name:'infoshow'})
            }else{
                this.$addr.get(`email/send?email=${this.email}`).then(
                    response=>{
                        console.log('发送验证码请求成功',response.data);
                        if(response.data.state == 4001){
                            this.$router.replace({name:'login',params:{'username':this.username}})
                        }else{
                            this.$router.push({name:'sendCode',params:{'email':this.email}})
                        }
                    },error=>{
                        this.$router.replace({name:'login'})
                        this.$message({
                            message:'发送验证码请求失败，请重新登陆',
                            type:'error'
                        })
                        console.log("发送验证码请求失败",error.message);
                    }
                )
            }
        },
    },
    watch:{
        ErrorMessage(value){
            if(value == 1){
                let num = -360
                let ok = 0
                var id = setInterval(() => {
                    this.ErrorPosition='margin-top:'+num+'px'
                    // console.log(this.ErrorPosition,'@');
                    if(num < -380){
                        ok = 1
                        num++
                    }else if(ok){
                        if(num > -365){
                            clearInterval(id);
                        }else{
                            num++
                        }
                    }else{
                        num--
                    }
                }, 3);
                var id3 = setTimeout(() => {
                    let num2=1
                    var id2 = setInterval(() => {
                        //下面的分号非常细节
                        this.ErrorPosition2=';opacity:'+num2
                        // console.log(this.ErrorPosition2,'%');
                        if(num2 < 0.05){
                            clearInterval(id2)
                            clearTimeout(id3)
                            this.ErrorMessage=0
                            this.ErrorPosition=this.ErrorPosition2=''
                        }else{
                            num2-=0.05
                        }
                    }, 15);
                }, 1000);
            }
        }
    },
    mounted(){
        this.$addr.get(`user/get_by_uid`).then(
            response=>{
                console.log('获取用户数据请求成功',response.data);
                this.phone=response.data.data.phone
                this.username=response.data.data.username
                this.email=response.data.data.email
            },error=>{
                this.$message({
                    message:'获取用户数据请求失败，请重新登陆',
                    type:'error'
                })
                console.log("获取用户数据请求失败",error.message);
                // this.$router.replace({name:'login'})
            }
        )
    },
}
</script>

<style scoped>
.div1{
    background: linear-gradient(to right,rgb(110, 207, 255),rgb(24, 166, 249));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    margin-top: 28px;
    left: 14px;
    height: 18px;
    position: absolute;
}
.zhezhao{
    width: 100%;
    height: 100%;
    background-color: rgb(221, 230, 238);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.div2{
    margin-left: 12px;
    margin-right: 12px;
}
.div3{
    color: rgb(125, 125, 125);
    font-size: 14px;
    margin-top: 10px;
}
.div4{
    margin-top: 15px;
    background-color: white;
    font-size: 14px;
    color: rgb(125, 125, 125);
    border-radius: 8px;
    box-shadow: 0px 3px 6px 0.3px rgb(231, 231, 231);
}
.img_phone{
    border-radius: 5px;
    padding: 8px;
    margin-top: 26px;
    margin-left: 15px;
    height: 26px;
    position: absolute;
    background-color: #f3f4f6;
}
.img_forward{
    position: fixed;
    height: 14px;
    margin-top: -51px;
    right: 30px;
}
.div33{
    position: absolute;
    width: 94%;
    font-size: 18px;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-left: 10px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 1px 5px 1px rgb(212, 212, 212) ;
    margin-top: -359px;
    /* margin-top: -294px; */
}
.img_error{
    height: 26px;
    position: absolute;
    margin-left: -15px;
    margin-top: 1px;
}
.img_safty{
    position: fixed;
    width: 40%;
    top: 260px;
    z-index: -1;
}
</style>